import React, { useCallback } from 'react'
import { Table, Space, Button, Popconfirm, message, Tag, Drawer, Form, Input, Select, Tree } from 'antd'
import { useState } from 'react'
import { useEffect } from 'react'
import { getUser } from './../../api/user.js'
import routes from './../../router/menu.js'
import './Admin.css'
const { Option } = Select

const App = () => {
    const [form] = Form.useForm()
    const columns = [
        {
            align: 'center',
            title: '序号',
            width: 60,
            key: 'num',
            render (text, data, index) {
              return (<span>{index+1}</span>)
            }
        },
        {
            title: '用户ID',
            dataIndex: 'userid'
        },
        {
            title: '用户名称',
            dataIndex: 'nickname',
        },
        {
            title: '手机号',
            dataIndex: 'tel',
            render (text, data, index) {
                return <Child data={data.tel}/>
                
                // console.log(userid);
                // if ( userid.indexOf(data.userid) !== -1 ) {
                //     return (<span className="watchTel" onClick={() => { hideTel(data.tel, data.userid) }}>{data.tel}</span>)
                // } else {
                //     return (<span className="watchTel" onClick={() => { seeTel(data.tel, data.userid) }}>***</span>)
                // }
            }
        }
    ]
    const [ userList, setUserList ] = useState([])
    // const [ userid, setUserid ] = useState([])
    useEffect(() => {
        getUser().then( res => {
            setUserList(res.data)
        })
    }, [])
    // const seeTel = (val, id) => {
    //     setUserid([...userid, id])
    // }
    // const hideTel = (val, id) => {
    //     // setUserid(() => {
    //     //     let list = userid
    //     //     list.forEach ( (item, index) => {
    //     //         if ( item === id ) {
    //     //             list.splice(index, 1)
    //     //         }
    //     //     })
    //     //     return list
    //     // })
    //     let list = userid
    //     list.forEach( (item, index) => {
    //         if ( item === id ) {
    //             list.splice(index, 1)
    //         }
    //     })
    //     setUserid([...list])
    // }
    return (
        <>
            <Table rowKey="userid" columns={columns} width="100%" dataSource={userList} scroll={{ x: 100, y: 600  }} />
        </>
    )
}
const Child = (props) => {
    console.log(props);
    const [flag, setFlag] = useState(true)
    return (<span className="watchTel" onClick={() => {setFlag(!flag)}}>{flag ? "***" : props.data}</span>)
}
export default App